<template>
    <div class="body-inner">
        <h1 class="body-title">
            <i :class="curMenu.icon"></i>
            <span>{{ curMenu.description }}</span>
            <div class="btn" @click="installOrUpdate" v-if="webviewStatus === ipc.STATUS.NEW_VERSION">
                立即更新&nbsp;v{{ update.version }}
            </div>
        </h1>
        <div class="body-main">
            <div v-if="webviewStatus === ipc.STATUS.INSTALLED || webviewStatus === ipc.STATUS.NEW_VERSION" class="webview-box">
                <img id="loading" src="../../assets/images/loading.svg" width="32" />
                <webview id="webview" :src="webview.url"></webview>
            </div>
            <div v-else class="install-box">
                <div class="install" v-if="webviewStatus === ipc.STATUS.NO_INSTALL">
                    <div class="btn" @click="installOrUpdate">
                        <i class="icon appfont app-setup"></i>
                        <span>立即安装</span>
                    </div>
                </div>
                <div class="onInstall" v-if="webviewStatus === ipc.STATUS.ON_INSTALL">
                    <div class="btn">
                        <i class="icon appfont app-setup"></i>
                        <span>{{ installMsg }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import IPC from '../../electron/ipc/dict';

/*别名*/
const IPC_WEBVIEW = IPC.IPC_WEBVIEW;

export default {
    name    : 'kit_baidu_translate',
    computed: {
        /*菜单*/
        ...mapGetters({
            'getMenu': 'menu/getMenu'
        })
    },
    data () {
        return {
            curMenu      : {},
            ipc          : IPC_WEBVIEW,
            webviewStatus: '',
            installMsg   : '安装中...',
            webview      : {},
            update       : {}
        };
    },
    mounted () {
        /*设置标题*/
        this.curMenu = this.getMenu(this.$options.name);

        /*获取webview的配置*/
        this.getSetting();

        /*监听webview配置信息的通知*/
        ipcRenderer.on(IPC_WEBVIEW.PUT_SETTING, (e, { name, status, setting, update }) => {
            console.log(IPC_WEBVIEW.PUT_SETTING);
            if (name !== this.$options.name) return false;

            /*状态*/
            this.webviewStatus = status;

            /*已安装或更新信息*/
            if (status === IPC_WEBVIEW.STATUS.INSTALLED || status === IPC_WEBVIEW.STATUS.NEW_VERSION) {
                this.webview = setting;
                this.$nextTick(this.showWebview);
            }

            /*更新信息*/
            if (status === IPC_WEBVIEW.STATUS.NEW_VERSION) {
                this.update = update;
            }
        });

        /*监听安装结果通知*/
        ipcRenderer.on(IPC_WEBVIEW.INSTALL_RESULT, (e, { name, errCode, errMsg }) => {
            if (name !== this.$options.name) return false;
            this.installMsg = errMsg;
            if (errCode === 0) setTimeout(this.getSetting, 1e3);
        });
    },
    methods: {
        /*获取webview的配置*/
        getSetting () {
            ipcRenderer.send(IPC_WEBVIEW.GET_SETTING, this.$options.name);
        },

        /*申请安装或升级当前webview配置*/
        installOrUpdate () {
            ipcRenderer.send(IPC_WEBVIEW.CONFIRM_INSTALL, { name: this.$options.name });
            this.webviewStatus = IPC_WEBVIEW.STATUS.ON_INSTALL;
        },

        /*显示wewbview*/
        showWebview () {
            const webview = document.getElementById('webview');
            const loading = document.getElementById('loading');
            webview.addEventListener('dom-ready', () => {
                setTimeout(() => {
                    webview.style.display = 'flex';
                    loading.style.display = 'none';
                }, 500);

                webview.executeJavaScript(this.webview.executeJavaScript);
                webview.insertCSS(this.webview.insertCSS);
                /*webview.openDevTools();*/
            });
        }
    },
    beforeDestroy () {
        /*解除监听*/
        ipcRenderer.removeAllListeners(IPC_WEBVIEW.PUT_SETTING);
        ipcRenderer.removeAllListeners(IPC_WEBVIEW.INSTALL_RESULT);
    }
};
</script>

<style scoped lang="less">
.install-box {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;

    .install, .onInstall {
        height          : 40px;
        display         : flex;
        align-items     : center;
        justify-content : center;

        .btn {
            background            : @blue;
            height                : 40px;
            display               : flex;
            align-items           : center;
            justify-content       : center;
            padding               : 0 20px;
            cursor                : pointer;
            -webkit-border-radius : 3px;
            -moz-border-radius    : 3px;
            border-radius         : 3px;

            &:hover {
                background : lighten(@blue, 10%);
            }

            .icon {
                margin-right : 6px;
            }
        }
    }

    .onInstall {
        .btn {
            background : #333;

            &:hover {
                background : lighten(#333, 10%);
            }
        }
    }
}

.webview-box {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;

    #loading {
        display : block;
    }

    #webview {
        width   : 100%;
        height  : 100%;
        display : none;
    }
}
</style>
